const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
//配合vue加载器的辅助插件
//“这个插件是必须的！“它的职责是将你定义过的其它规则复制并应用到.vue文件里相应语言的块
const vue_loader_plugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    // devServer: {
    //     open: true,//自动打开浏览器
    //     hort: 3000,//配置端口号
    //     contentBase: 'src',//置顶托管的根目录
    //     hot: true//启用热更新的第一步
    // },
    plugins: [
        new vue_loader_plugin(),
        new htmlWebpackPlugin({//配置插件-生成内存中的html
            template: path.join(__dirname,'./src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
           {test: /\.css$/, use: ['style-loader','css-loader']},
           //下载vue-loader,vue-complate-compiler
           {test: /\.vue$/, use: 'vue-loader',exclude: '/node_modules/'},
           {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
           {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
        // 处理打包图片类的文件，下载url-loader,file-loader,name参数代表引用图片的名字和后缀名都不变
        //,每一个名字前面放一个hash值，防止重名,?limit=7631&name=[hash:8]-[name].[ext]
           {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader'},
           //处理字体图标格式
           {test: /\.(ttf|eot|svg|woff|woff2|otf)$/,use: 'url-loader'},
        //    //处理一些webpack识别不了es6语法的js文件，但不包含node_modules里面的js文件
        //    {test: /\.js$/,use: 'babel-loader',exclude: '/node_modules/'}
        ]
    }
    // resolve: {//导入vue的查找规则，默认导入的vue是不全的，这里设置的是最全的vue
    //     alias: {
    //         vue$: 'vue/dist/vue.js'
    //     }
    // }
}